<template>
  <div>
	<div>
		<header  class="mint-header is-fixed">
		<div   class="backBtn" @click="$router.back(-1)">
          <i  class="icon iconfont icon-back"></i>
        </div>
		<h1 class="mint-header-title">完善用户信息</h1>
		<div class="mint-header-button is-right">
		</div>
		</header>
	</div>
	<div  class="wrapper">
		<div  class="padding-header relative">
			<div  class="form-wrap form-padding">
				<!-- <ul >
					<li  class="clearfix">
                        <div  class="iptBox long">
                            <input  type="tel" placeholder="请输入身份证号"  maxlength="11" name="phone" v-model="idno"><i  class="icon iconfont icon-mobile"></i>
                        </div>
					</li>
                    <li  class="clearfix">
                        <div  class="iptBox long">
                            <input  type="tel" placeholder="请输入银行卡号"  maxlength="11" name="phone" v-model="bankNO"><i  class="icon iconfont icon-mobile"></i>
                        </div>
					</li>
					<li  class="clearfix">
                        <div  class="iptBox long">
                            <input  type="tel" placeholder="请输入详细地址"  maxlength="11" name="phone" v-model="address"><i  class="icon iconfont icon-mobile"></i>
                        </div>
					</li>
					<li  class="clearfix">
					<div  class="iptBox long" @click="regFn">
						<span  class="sureBtn active">确认提交</span>
					</div>
					<div  style="clear: both;">
					</div>
					</li>
				</ul> -->
                <van-form validate-first >
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field
                        v-model="datainfo.idno"
                        label="身份证号"
                        name="pattern"
                        placeholder="请输入身份证号"
                    />
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field
                        v-model="datainfo.bankNO"
                        label="银行卡号"
                        name="validator"
                        placeholder="请输入银行卡号"
                    />
                    <van-field
                        v-model="choseAddress"
                        label="选择地址"
                        name="validator"
                        placeholder="请选择地址"
                        @click="showAddress=true"
                    />
                    <van-popup v-model="showAddress" position="bottom">
                        <van-area
                        title="标题"
                        :area-list="AreaList"
                        :columns-placeholder="['请选择', '请选择', '请选择']"
                        @confirm="onAddConfirm"
                        @cancel="onAddCancel"
                        />
                    </van-popup>
                    <!-- 通过 validator 进行异步函数校验 -->
                    <van-field
                        v-model="datainfo.address"
                        label="详细地址"
                        name="asyncValidator"
                        placeholder="请输入详细地址"
                    />
                    <div style="margin: 16px;" @click="confirmBtn">
                        <van-button round block type="info" native-type="submit">
                        提交
                        </van-button>
                    </div>
                </van-form>
			</div>
		</div>
		<input  type="hidden">
	</div>
</div>
</template>

<script>
import { MemberEditUrl,MemberBaseInfoUrl,CityListUrl } from "@/api/axiosFun";
// 导入area.js文件数据
import AreaList from '@/api/area';

export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
	  bannerList: [],
	  page:1,
	pageSize:100,
	traderType:"",
	cityId:"",
	orderNum:false,
	Latitude:"",
	Longitude:"",
	memberType:0,
	currentIndex:0,
	mobile:"",
	idno:"",
	bankNO:"",
    address:"",
    datainfo:{
        idno:'',
        bankNO:'',
        provinceId:'',
        provinceName:'',
        cityId:'',
        cityName:'',
        townId:'',
        townName:'',
        address:''
    },
    choseAddress:'',
    MemberPriceList:[],
    showAddress:false,
    AreaList:AreaList,    // 指定数据源AreaList
    searchResult: []
    };
  },
  created(){
     //this.getCity()
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        MemberBaseInfoUrl().then(res=>{
            console.log(res);
           if(res.data.errCode == 0){
               this.datainfo = res.data.data;
               this.choseAddress = res.data.data.provinceName+res.data.data.cityName+res.data.data.townName
           }
        },error=>{
            Toast(res.data.errMsg);
            return
        })
    },
    getCity(){
        CityListUrl({
            page:1,
            pageSize:4000
        }).then(res=>{
            console.log(res);
           if(res.errCode == 0){
               //this.AreaList = res.data;
               var province_list,city_list,county_list=[];
               if(res.data &&　res.data.length>0){
                   res.data.map((item)=>{
                       if(item.levelId == 1){
                        province_list.push(item);
                       }
                       if(item.levelId == 2){
                        city_list.push(item);
                       }
                       if(item.levelId == 3){
                        county_list.push(item);
                       }
                       var newAreaList={
                           province_list:{},
                           city_list:{},
                           county_list:{}
                       };
                   });
               }
               //this.choseAddress = res.data.data.provinceName+res.data.data.cityName+res.data.data.townName
           }
        },error=>{
            Toast(res.data.errMsg);
            return
        })
    },
    onAddCancel(){
        this.showAddress = false;
    },
    onAddConfirm(val){
        console.log(val);
        this.showAddress = false;
        if(val && val.length>0){
            this.choseAddress = val[0].name+val[1].name+val[2].name;
            this.datainfo.provinceId = Number(val[0].code);
            this.datainfo.provinceName = val[0].name;

            this.datainfo.cityId = Number(val[1].code);
            this.datainfo.cityName = val[1].name;

            this.datainfo.townId = Number(val[2].code);
            this.datainfo.townName = val[2].name;
        }
        
    },
    //点击注册
    confirmBtn(){
        console.log(222);
        MemberEditUrl(this.datainfo).then(res=>{
            console.log(res);
           if(res.errCode == 100){
               Toast(ret.errMsg);  
           }
        },error=>{
            Toast(res.errMsg);
            return
        })
    },
    // getPayinfo(){
    //   UnifiedOrder(2).then(res=>{
      
    //     if(res.data.Data!=null){
    //       this.payinfo=res.data.Data
    //       this.pay()
    //     }
    //   })
    // },
    
    //发送验证码
    sendCode() {
        console.log(111);
        console.log(this.mobile);
        if (!this.mobile) {
            Toast('请填写手机号');
            return
        }
        SmsValidCodeUrl({
            mobile:this.mobile,
            smsType:0
        }).then(ret=>{
            console.log(ret);
            if(ret.errCode == 0){
                //this.code = ret.data;
            }
        });
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #26a2ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    height: 40px;
    line-height: 1;
    padding: 0 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.mint-header.is-fixed {
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}
.mint-header[data-v-48f5980a] {
    height: 1.32rem;
    font-size: .44rem;
    background: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-left {
    text-align: left;
}
.mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: 18px;
    height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.mint-button--default {
    color: #656b79;
    background-color: #f6f8fa;
    -webkit-box-shadow: 0 0 1px #b8bbbf;
    box-shadow: 0 0 1px #b8bbbf;
}
.mint-button--normal, .mint-button--small {
    display: inline-block;
    padding: 0 12px;
}
.mint-header .mint-button {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
}
.header-icon[data-v-48f5980a] {
    color: #fff;
}
.mint-button-icon {
    vertical-align: middle;
    display: inline-block;
}
.header-icon[data-v-48f5980a] {
    color: #fff;
}
.mintui {
    font-family: mintui!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .2px;
    -moz-osx-font-smoothing: grayscale;
}
.mint-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-right {
    text-align: right;
}
.wrapper {
    position: fixed;
    top: 1.32rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.form-wrap, .wrapper {
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#f7f7f7));
    background: linear-gradient(180deg,#f1f1f1,#f7f7f7);
}
.relative {
    position: relative;
}
.form-wrap, .wrapper {
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#f7f7f7));
    background: linear-gradient(180deg,#f1f1f1,#f7f7f7);
}
.form-wrap {
    display: block;
    width: 100%;
}
.form-wrap ul {
    height: auto;
    padding: 0 .44rem;
}
.clearfix {
    *zoom: 1;
}
.form-wrap li {
    width: 100%;
    margin: 0 0 .5rem;
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.05);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.form-wrap li .iptBox {
    height: 1.2rem;
    position: relative;
    float: left;
}
.form-wrap li .iptBox.long {
    width: 9.92rem;
}
.form-wrap li .iptBox input, .form-wrap li .iptBox select {
    width: 100%;
    height: 1.2rem;
    background: #fff;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .2rem;
    font-size: .36rem;
    float: left;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.form-wrap li .iptBox i {
    font-size: .42rem;
    position: absolute;
    top: 50%;
    right: .2rem;
    margin-top: -.21rem;
    color: #9c9c9c;
}
.form-wrap li .iptBox.middle {
    width: 6.02rem;
}
.form-wrap li .iptBox input, .form-wrap li .iptBox select {
    width: 100%;
    height: 1.2rem;
    background: #fff;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .2rem;
    font-size: .36rem;
    float: left;
}
.form-wrap li .iptBox.short {
    width: 3.7rem;
    margin-left: .2rem;
}
.form-wrap li .iptBox button {
    width: 100%;
    height: 1.2rem;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
    float: left;
}.form-wrap li .iptBox button {
    width: 100%;
    height: 1.2rem;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
    float: left;
}
.form-wrap li .iptBox button.grayBg {
    background: linear-gradient(35deg,#6f7ecf,#99ceff);
}
.form-wrap li {
    width: 100%;
    margin: 0 0 .5rem;
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.05);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.form-wrap li.gradeItem {
    width: auto;
    height: 1.2rem;
    border-radius: 5px;
    font-size: .36rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 .2rem;
}
.form-wrap li.gradeItem.active {
    background-color: #fff;
}
.form-wrap li.gradeItem i {
    font-size: .64rem;
    padding-left: 2px;
    margin-top: -2px;
    color: #b6b6b6;
}
.form-wrap li.gradeItem.active i {
    color: #0085ff;
}
.form-wrap li.gradeItem label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: .2rem;
}
.form-wrap li.gradeItem span {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: right;
    color: #0085ff;
    font-size: .42rem;
}
.form-wrap li.gradeItem label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: .2rem;
}
.form-wrap li.gradeItem span {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: right;
    color: #0085ff;
    font-size: .42rem;
}
.form-wrap li.payMethod {
    height: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .36rem;
    width: auto;
    border-radius: 5px;
    margin-top: .2rem;
    background-color: #fff;
    padding: 0 .2rem;
}
.form-wrap li.payMethod i.icon-checked-fill.active {
    color: #09bb07;
}
.form-wrap li.payMethod span i {
    color: #09bb07;
    font-size: .64rem;
}
.form-wrap li .iptBox span.sureBtn {
    font-size: .42rem;
    background: #d5d5d5;
    color: #666;
    letter-spacing: 2px;
}
.form-wrap li .iptBox span.sureBtn.active {
    color: #fff;
    background: linear-gradient(35deg,#9000ff,#ff6d00);
}
.form-wrap li .iptBox span {
    display: block;
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
}
</style>
